{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}IP网段{% endblock %}

{% block css %}

<!-- DataTables -->
  <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  <!-- AdminLTE Skins. Choose a skin from the css/skinsfolder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}

{% block content %}

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
       IP网段管理
      </h1>
      <ol class="breadcrumb">
        <li><a href={% url 'dashboard' %}><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">IP网段管理</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <form action={% url 'ipnet' %}  method="get">
            <div class="form-group">
              <div class="row">
                <div class="col-xs-2">
                  <label for="search">网段</label>
                  <textarea id='name' rows='1' class="form-control" name='name'></textarea>
                </div>
                <div class="col-xs-2">
                  <label for="search">网关</label>
                  <input type="text" id='name' rows='1' class="form-control" name='gw_ip'>
                </div>
                <div class="col-xs-2">
                  <label for="search">运营商</label>
                  <input type="text" class="form-control" name='isp'>
                </div>
                <div class="col-xs-3">
                  <label for="search">客户名称</label>
                  <input type="text" class="form-control" name='ipnet_customer'>
                </div>
                <div class="col-xs-2">
                  <label for="search">VLAN</label>
                  <input type="text" class="form-control" name='vlan'>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-xs-2">
                  <label for="search">状态</label>
                  <select class="form-control" name='ipnet_status' id='ipnet_status'>
                    <option selected value></option>
                    <option value='0'>运营</option>
                    <option value='1'>待分配</option>
                    <option value='2'>已分配</option>
                    <option value='3'>保留</option>
                  </select>
                </div>
                <div class="col-xs-2">
                  <label for="search">类型</label>
                  <select class="form-control" name='ipnet_type' id='ipnet_type'>
                    <option selected value></option>
                    <option value='0'>业务网段</option>
                    <option value='1'>互联网段</option>
                  </select>
                </div>
                <div class="col-xs-2">
                  <label for="search">裂解状态</label>
                  <select class="form-control" name='split_status' id='split_status'>
                    <option selected value></option>
                    <option value='0'>是</option>
                    <option value='1'>否</option>
                  </select>
                </div>
              </div>
            </div>
            <p style=" margin:0 auto; text-align:center;">
              <button type="submit" id="searchbutton" align="center" class="btn">查询</button>
            </p>
           </form>
    <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          <h4 class="box-title">查询结果</h4>
          <button type="submit" class="btn btn-default pull-right" onclick="window.open( {%url 'ipnetimport' %} )">IP网段导入</button>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <table id="assets_table" class="display table table-bordered table-striped">
            <thead>
            <tr>
              <th>网段</th>
              <th>网关</th>
              <th>运营商</th>
              <th>状态</th>
              <th>类型</th>
              <th>客户名称</th>
              <th>裂解状态</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
                {% for ipnet in ipnet %}
                <tr>
                  <td id="ipnet_name"><a href="{% url 'ipnetdetail' ipnet.id %}" target=_blank >{{ ipnet.name }}</td>
                  {% if ipnet.gw_ip != None %} 
                  <td>{{ ipnet.gw_ip }}</td>
                  {% else %}
                  <td><button type="button" class="btn btn-sm btn-default" onclick="addgw(this)" id="addgw">添加网关</button>
                  {% endif %}
                  <td>{{ ipnet.isp }}</td>
                  <td>{{ ipnet.get_ipnet_status_display }}</td>
                  <td>{{ ipnet.get_ipnet_type_display }}</td>                
                  <td>{{ ipnet.ipnet_customer }}</td>
                  <td id="ipnet_split">{{ ipnet.get_split_status_display }}</td>
                  <td>
                    <button type="button" class="btn btn-sm btn-info" onclick="splitipnet(this)" id="splitipnet">裂解</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="delipnet(this)" id="delipnet">删除</button>
                  </td>
                </tr>
                {% empty %}
                  <tr>没有数据！</tr>
                {% endfor %}

            </tbody>
          </table>
          <form class="form-inline content_size" action="{% url 'ipnet' %}" method="post">
            {% csrf_token %}
            <div class="modal fade" id='addgwModal' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
              <div class="modal-dialog modal-sm">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">网段添加网关</h4>
                  </div>
                  <div class="modal-body">
                    <div class="form-group">
                      <label for="modify">确认网段</label>
                      <input type="text" class="form-control" name='name' readonly id="addgwipnet_name">
                    </div>
                    <div class="form-group">
                      <label for="modify">网关</label>
                      <input type="text" class="form-control" name='gw_ip'>
                    </div>
                    <div class="form-group">
                      <label for="modify">添加原因<font color='#ff0000'>*</font></label>
                      <input type="text" class="form-control" name='reason' required>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="submit" name="submit" value="addgw" class="btn btn-primary">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form class="form-inline content_size" action="{% url 'ipnet' %}" method="post">
            {% csrf_token %}
            <div class="modal fade" id='ipnetsplitModal' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
              <div class="modal-dialog modal-sm">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">网段裂解</h4>
                  </div>
                  <div class="modal-body">
                    <div class="form-group">
                      <label for="modify">确认裂解网段</label>
                      <input type="text" class="form-control" name='name' readonly id="splitipnet_name">
                    </div>
                    <div class="form-group">
                      <label for="modify">裂解原因<font color='#ff0000'>*</font></label>
                      <input type="text" class="form-control" name='reason' required>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="submit" name="submit" value="ipnet_split" class="btn btn-primary">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form class="form-inline content_size" action="#" method="post">
            {% csrf_token %}
            <div class="modal fade" id='ipnetspliterrModal' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
              <div class="modal-dialog modal-sm">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">网段已裂解</h4>
                  </div>
                  <div class="modal-body">
                     <p>网段已裂解，不需要再次裂解</p>
                  </div>
                  <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" data-dismiss="modal">确认</button>
                  </div>
                </div>
              </div>
            </div>
          </form>
           <form class="form-inline content_size" action="{% url 'ipnet' %}" method="post">
             {% csrf_token %}
             <div class="modal fade" id='ipnetdelModal' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
               <div class="modal-dialog modal-sm">
                 <div class="modal-content">
                   <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                     <h4 class="modal-title">删除网段</h4>
                   </div>
                   <div class="modal-body">
                     <div class="form-group">
                       <label for="modify">确认删除网段</label>
                       <input type="text" class="form-control" name='name' readonly id="delipnet_name">
                     </div>
                     <div class="form-group">
                       <label for="modify">删除原因<font color='#ff0000'>*</font></label>
                       <input type="text" class="form-control" name='del_reason' required>
                     </div>
                   </div>
                   <div class="modal-footer">
                     <button type="submit" name="submit" value="ipnet_del" class="btn btn-primary">确认</button>
                     <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                   </div>
                 </div>
               </div>
             </div>
           </form>
         </div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
    </div>
    <!-- /.row -->
    </section>

{% endblock %}

{% block script %}
    <!-- DataTables -->
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
    <!-- SlimScroll -->
    <script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
    <!-- FastClick -->
    <script src="{% static 'plugins/fastclick/fastclick.min.js' %}"></script>
    <!-- AdminLTE App -->
    <script src="{% static 'dist/js/adminlte.min.js' %}"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{% static 'dist/js/demo.js' %}"></script>
    <script src="../static/js/myjs.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/buttons.dataTables.min.css' %}">
    <!-- page script -->
    <script>
    $(document).ready(function() {
    $('#assets_table').DataTable( {
        dom: 'lBfrtip',
        buttons: [
        {
            extend: 'excel',
            text: '导出当前页',
            exportOptions: {
                columns: ':visible',
                modifier: {
                    page: 'current'
                }
            }
        },
        {
            extend: 'excel',
            text: '导出所有',
            exportOptions: {
                columns: ':visible',
            }    
        }
    ],
    "columnDefs": [
  ]
    } );
} );
</script>
<script>
  var name = getUrlParameter('name');
  $("#name").val(name);
  var isp = getUrlParameter('isp');
  $("input[name='isp']").val(isp);
  var gw_ip = getUrlParameter('gw_ip');
  $("input[name='gw_ip']").val(gw_ip);
  var ipnet_customer = getUrlParameter('ipnet_customer');
  $("input[name='ipnet_customer']").val(ipnet_customer);
  var vlan = getUrlParameter('vlan');
  $("input[name='vlan']").val(vlan);
  var ipnet_status = getUrlParameter('ipnet_status');
  $("#ipnet_status").val(ipnet_status)
  var ipnet_type = getUrlParameter('ipnet_type');
  $("#ipnet_type").val(ipnet_type);
  var split_status = getUrlParameter('split_status');
  $("#split_status").val(split_status);
</script>
<script>
function splitipnet(obj) {
  var tr = $(obj).parent().parent();
  var ipnet_name = tr.children("td#ipnet_name").text();
  var ipnet_split = tr.children("td#ipnet_split").text();
  if (ipnet_split=="否")
     {
      $('#splitipnet_name').val(ipnet_name);
      $('#ipnetsplitModal').modal('show');
     }
  else
     {
     $('#ipnetspliterrModal').modal('show');
     }
};

  function delipnet(obj) {
    var tr = $(obj).parent().parent();
    var ipnet_name = tr.children("td#ipnet_name").text();
    $('#delipnet_name').val(ipnet_name);
    $('#ipnetdelModal').modal('show');
  };

  function addgw(obj) {
    var tr = $(obj).parent().parent();
    var ipnet_name = tr.children("td#ipnet_name").text();
    $('#addgwipnet_name').val(ipnet_name);
    $('#addgwModal').modal('show');
  };
</script>
{% endblock %}
